$(function () {
    var strProvince = ''
    arrProvince.forEach(function (item) {
        strProvince += `
                        <option value="${item.ProID}">${item.name}</option>
                       `
    })
    $('#province').html(strProvince)

    $('#province').on('change', function (e) {
        var strCity = ''
        arrCity.forEach(function (item) {
            if ($('#province').val() == item.ProID) {
                strCity += `
                        <option value="${item.CityID}">${item.name}</option>
                       `
            }
        })
        $('#city').html(strCity)
        var strCounty = ''
        arrArea.forEach(function (item) {
            if ($('#province').val() == item.CityID) {
                strCounty += `
                        <option value="${item.DisName}">${item.DisName}</option>
                       `
            }
        })
        $('#county').html(strCounty)
    })
    $('#city').on('change', function (e) {
        var strCounty = ''
        arrArea.forEach(function (item) {
            if ($('#city').val() == item.CityID) {
                strCounty += `
                        <option value="${item.DisName}">${item.DisName}</option>
                       `
            }
        })
        $('#county').html(strCounty)
    })

})